<template>
  <div class="container">
    <nav-bar title="订单详情" />
    <!-- 快递信息 -->
    <div class="express">
      <div class="item">
        <img src='../../assets/img/icon-order-deliver.png' />
        <div class="tips">
          <h3>
            {{order.Status}}
            <span v-if="order.RefundStats!==0">(退款中)</span>
            <span v-if="order.RefundTotalAmount!==0">(退款成功)</span>
            <em v-if="order.RefundTotalAmount!==0">退款金额: {{order.RefundTotalAmount}}</em>
          </h3>
          <p>{{order.OrderDate}}</p>
        </div>
        <div class="link" v-if="order.orderStatus===2 && order.status!=='退款中' && order.IsCanRefund" @click.stop="goToBackMoney(order.Id)">退款</div>
        <!-- <div class="link" v-if="(order.orderStatus===3 || (order.orderStatus===5&& order.commentCount===0)) && order.IsCanRefund" @click.stop="goToBackProduct(order.Id)">退货</div> -->
        <!-- <div class="link" v-if="(order.orderStatus===3 || ((order.orderStatus===5&& order.commentCount===0)) && order.CanRefund) && (RefundInfo===null || RefundInfo===undefined)" @click.stop="goToBackProduct(order.id)">退货</div> -->
      </div>
    </div>
    <!-- 收货地址 -->
    <div class="address">
      <div class="item">
        <img src='../../assets/img/icon-order-location.png' />
        <div class="info">
          <div class="name-tel">
            <span class="name">{{order.ShipTo}}</span>
            <span class="tel">{{order.Phone}}</span>
          </div>
          <div class="area">
            {{order.Address}}
          </div>
        </div>
      </div>
    </div>
    <!-- 购买产品 -->
    <div class="product">
      <div class="item" v-for="(item, index) in products" :key="index">
        <div class="pro-info" @click="goToProduct(item.ProductId)">
          <img :src='item.ProductImage' />
          <div class="name">{{item.ProductName}}</div>
          <div class="price-num">
            <div class="price">¥{{item.Price}}</div>
            <div class="num">&times;{{item.Count}}</div>
            <div class="linkp" 
              v-if="(order.orderStatus===3 || order.orderStatus===5 || order.orderStatus===7) && (RefundInfo===null || RefundInfo===undefined)" 
              @click.stop="goToBackProduct(orderId, item.ItemId)">
              退货
            </div>
            <div class="linkp" 
              v-if="item.RefundStats!==null" 
              @click.stop="goToOrderRefund(RefundInfo.Id)">
              售后中
            </div>
          </div>
        </div>
      </div>
      <div class="total">
        <div class="pri price-g">商品总价:<i>¥{{order.ProductTotalAmount}}</i></div>
        <!-- <div class="pri price-g">优惠券:<i>-¥</i></div> -->
        <div class="pri price">订单总价:<i>¥{{order.RealTotalAmount}}</i></div>
        <div class="pri price-r">实付款:<i>¥{{order.RealTotalAmount}}</i></div>
      </div>
    </div>
    <!-- 详细数据 -->
    <div class="detail">
      <div class="tit">订单信息</div>
      <div class="con">
        <div class="item">
          <div class="label">订单编号:</div>
          <div class="value">{{orderId}}</div>
        </div>
        <div class="item">
          <div class="label">创建时间:</div>
          <div class="value">{{order.OrderDate}}</div>
        </div>
        <!-- <div class="item">
          <div class="label">付款时间:</div>
          <div class="value">2020-03-11 12:09:22</div>
        </div>
        <div class="item">
          <div class="label">发货时间:</div>
          <div class="value">2020-03-11 12:09:22</div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import { getUserOrder } from '../../network/user'
import { getRefundList } from '../../network/order'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      userKey: localStorage.getItem('userKey'),
      orderId: '',
      products: [],
      order: {},
      RefundInfo: null
    }
  },
  mounted() {
    this.orderId = this.$route.query.orderId || ''
    this.getUserOrder()
  },
  methods: {
    goToOrderRefund(orderId){
      this.$router.push({
        path: '/orderRefund',
        query: {
          orderId
        }
      })
    },
    goToBackMoney(orderId){
      this.$router.push({
        path: '/returnmoney',
        query: {
          orderId
        }
      })
    },
    goToBackProduct(orderId, productId){
      this.$router.push({
        path: '/returnProduct',
        query: {
          orderId,
          productId
        }
      })
    },
    getUserOrder(){
      let requestData = {
        userkey: this.userKey,
        id: this.orderId
      }
      getUserOrder(requestData, order => {
        this.order = order.Order
        this.products = order.OrderItem

        // 获取售后订单，增加售后数据
        this.RefundInfo = null
        getRefundList(list => {
          list.map(item => {
            if(this.orderId == item.OrderId){
              this.RefundInfo = item
            }
          })
        })
      })
    },
    goToProduct(id){
      this.$router.push({
        path: '/product',
        query: {
          id
        }
      })
    }
  },
}
</script>

<style scoped>
.express .item{
  display: flex;
  align-items: center;
  background-color: #fff;
  margin-bottom: 10px;
  padding: 15px;
}
.express .item img{
  width: 36px;
  margin-right: 10px;
}
.express .item .tips{
  flex-grow: 1;
}
.express .item .tips h3{
  font-size: 16px;
  color: #0598dd;
}
.express .item .tips p{
  font-size: 14px;
  color: #999;
  line-height: 2;
}
.express .item .tips em{
  margin-left: 20px;
  font-size: 14px;
  color: #d50721;
}
.address .item{
  display: flex;
  align-items: center;
  padding: 15px;
  color: #787878;
  font-size: 14px;
  background-color: #fff;
  margin-bottom: 10px;
}
.address .item img{
  width: 36px;
  margin-right: 10px;
}
.address .item .info .name-tel span{
  padding-right: 10px;
}
.product .item .pro-info{
  padding: 15px;
  display: flex;
  border-bottom: 1px solid #f0f0f0;
  background-color: #fff;
}
.product .item .pro-info img{
  width: 80px;
  height: 80px;
  margin-right: 10px;
  flex-shrink: 0;
  border-radius: 3px;
}
.product .item .pro-info .name{
  flex-grow: 1;
  padding-right: 10px;
  height: 66px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-all;
  font-size: 14px;
}
.product .item .pro-info .price-num{
  text-align: right;
}
.product .item .pro-info .price-num .num{
  color: #999;
}
.product .total{
  text-align: right;
  padding: 10px 15px;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  background-color: #fff;
}
.product .total .amount{
  padding-right: 10px;
}
.product .total .pri{
  display: flex;
  justify-content: space-between;
}
.product .total .price i{
  padding-left: 5px;
}
.product .total .price-g{
  color: #ababab;
}
.product .total .price-r{
  padding-top: 10px;
  padding-bottom: 5px;
  font-size: 16px;
}
.product .total .price-r i{
  color: #d50721;
}
.detail{
  margin-top: 10px;
  background-color: #fff;
}
.detail .tit{
  line-height: 2.2;
  font-size: 14px;
  padding: 8px 15px 0 15px;
}
.detail .con{
  padding: 0 15px 10px 15px;
}
.detail .con .item{
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #999;
  line-height: 2.2;
}
.detail .con .item .label{
  width: 65px;
}
.link{
  min-width: 80px;
  padding: 8px 15px;
  font-size: 14px;
  margin-left: 10px;
  border-radius: 50px;
  border: 1px solid #d50721;
  box-sizing: border-box;
  text-align: center;
  color:#fff;
  background-color: #d50721;
}
.linkp{
  min-width: 60px;
  padding: 4px 0;
  font-size: 14px;
  margin-left: 10px;
  margin-top: 12px;
  border-radius: 3px;
  border: 1px solid #d50721;
  box-sizing: border-box;
  text-align: center;
  color:#fff;
  background-color: #d50721;
}
</style>